 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/template/rich-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core" 
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
	
	<ui:define name="titulo">Cálculo de Horas</ui:define>
	
	<ui:define name="body">
		<script type="text/javascript" src="#{request.contextPath}/js/jquerymaskedinput1_3.js" />
		<script type="text/javascript">
			//<![CDATA[
			function checkSize(field, coluna, linha, event) {
				if(!field.value.match(/_/g)) {
					if(coluna == 'E1') {
						$("input[onkeyup=\"checkSize(this,'S1',"+linha+",event);\"]").focus();
					} else if(coluna == 'S1') {
						$("input[onkeyup=\"checkSize(this,'E2',"+linha+",event);\"]").focus();
					} else if(coluna == 'E2') {
						$("input[onkeyup=\"checkSize(this,'S2',"+linha+",event);\"]").focus();
					} else if(coluna == 'S2') {
						$("input[onkeyup=\"checkSize(this,'E1',"+(linha+1)+",event);\"]").focus();
					}
				}
			}
			//]]>
		</script>
		
		<h:form>
			<h:panelGroup layout="block" style="margin-top: 25px;">
				<h:panelGrid columns="2" style="margin-bottom: 15px;" styleClass="centralized">
					<h:outputLabel value="#{msgs['label.identificador']}" styleClass="required" />
					<h:outputText value="#{pontoMB.ponto.idPonto}"/>
					
					<h:outputLabel value="Competência: " styleClass="required" />
					<h:outputText value="#{pontoMB.ponto.competencia.mes.nome}/#{pontoMB.ponto.competencia.ano}"/>
						
					<h:outputLabel value="Empresa: " styleClass="required" />
					<h:outputText value="#{pontoMB.ponto.empresa.nome}"/>
					
					<h:outputLabel value="Funcionário: " styleClass="required" />
					<h:outputText value="#{pontoMB.ponto.funcionario.nome}"/>
				</h:panelGrid>
				
				<h:panelGrid id="infoPonto" columns="2" style="margin-bottom: 15px;" styleClass="centralized">
					<h:outputLabel value="#{msgs['cadastroEmpresa.jornada']}: " styleClass="required" rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}" />
					<h:inputText label="#{msgs['cadastroEmpresa.jornada']}" value="#{pontoMB.ponto.jornada}" required="true" size="4" maxlength="5" rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}">
						<a4j:ajax event="blur"  render="tab_resultado,messages"/>
					</h:inputText>
					
					<h:outputLabel value="#{msgs['cadastroEmpresa.tolerancia']}: " rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}"/>
					<rich:inputNumberSpinner label="#{msgs['cadastroEmpresa.tolerancia']}" value="#{pontoMB.ponto.tolerancia}" minValue="0" maxValue="60" enableManualInput="true" rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}">
						<a4j:ajax event="change"  render="tab_resultado,messages"/>
					</rich:inputNumberSpinner>
				</h:panelGrid>
				
				<h:panelGrid columns="5" id="periodo" styleClass="centralized">
					<h:outputLabel value="Início:" styleClass="required" rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}"/>
					<rich:calendar
						label="Período Inicio"
						value="#{pontoMB.ponto.dataInicio}"
	                    locale="pt_br"
	                    datePattern="dd/MM/yyyy"
	                    showWeeksBar="false"
	                    required="true"
	                    rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}"/>
	                    
	                <h:outputLabel value="Fim:" styleClass="required" rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}"/>
					<rich:calendar 
						label="Período Fim"
						value="#{pontoMB.ponto.dataFim}"
	                    locale="pt_br"
	                    datePattern="dd/MM/yyyy"
	                    showWeeksBar="false"
	                    required="true"
	                    rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}"/>
	                    
	                <a4j:commandButton value="Carregar" action="#{pontoMB.carregar}" render="tabela_dias,messages" execute="@form" rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}" data="periodo" styleClass="no_print"/>
				</h:panelGrid>
				<br/>
				<a4j:outputPanel id="tabela_dias">
					<h:panelGrid rendered="#{!empty pontoMB.ponto.funcionario.idFuncionario}" styleClass="centralized">
						<h:panelGroup layout="block" style="text-align: right;">
							<h:commandButton value="Salvar" action="#{pontoMB.salvar}" styleClass="no_print" />
							<h:commandButton value="Imprimir" action="#{pontoMB.imprimir}" styleClass="no_print"/>
						</h:panelGroup>
						<h:panelGroup>
							<table cellpadding="0" cellspacing="0">
								<tr>
									<td>
										<rich:dataTable var="reg" value="#{pontoMB.ponto.registros}" rendered="#{!empty pontoMB.ponto.registros}" id="tab_calculo" rowKeyVar="rowCount">
											<f:facet name="header">
												<rich:columnGroup>
													<rich:column rowspan="2">
									                    <h:outputText value="Dia" />
									                </rich:column>
									                <rich:column colspan="2">
									                    <h:outputText value="Turno 1" />
									                </rich:column>
									                <rich:column colspan="2">
									                    <h:outputText value="Turno 2" />
									                </rich:column>
									                <rich:column breakRowBefore="true">
									                	<h:outputText value="Entrada 1" />
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="Saída 1" />
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="Entrada 2" />
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="Saída 2" />
									                </rich:column>
												</rich:columnGroup>
											</f:facet>
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8;':'background-color: white;'}">
												<h:outputText value="* " style="color:red;" rendered="#{!empty reg.feriados}"/>
												<h:outputText value="- " style="visibility: hidden;" rendered="#{empty reg.feriados}"/>
												<h:outputText value="#{reg.dia}">
													<f:convertDateTime pattern="dd/MM" type="date"/>
												</h:outputText>
											</rich:column>
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8;':'background-color: white;'}">
												<h:inputText value="#{reg.horaEntrada1}" size="5" maxlength="5" style="text-align:center;" onkeyup="checkSize(this,'E1',#{rowCount},event);">
													<a4j:ajax event="blur"  render="tab_resultado,messages"/>
												</h:inputText>
											</rich:column>
											
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8;':'background-color: white;'}">
												<h:inputText value="#{reg.horaSaida1}" size="5" maxlength="5" style="text-align:center;" onkeyup="checkSize(this,'S1',#{rowCount},event);">
													<a4j:ajax event="blur" render="tab_resultado,messages"/>
												</h:inputText>
											</rich:column>
											
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8;':'background-color: white;'}">
												<h:inputText value="#{reg.horaEntrada2}" size="5" maxlength="5" style="text-align:center;" onkeyup="checkSize(this,'E2',#{rowCount},event);">
													<a4j:ajax event="blur" render="tab_resultado,messages"/>
												</h:inputText>
											</rich:column>
											
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8;':'background-color: white;'}">
												<h:inputText value="#{reg.horaSaida2}" size="5" maxlength="5" style="text-align:center;" onkeyup="checkSize(this,'S2',#{rowCount},event);">
													<a4j:ajax event="blur" render="tab_resultado,messages" />
												</h:inputText>
											</rich:column>
											
											<f:facet name="footer">
									            <rich:columnGroup>
									                <rich:column colspan="5">Total:</rich:column>
									            </rich:columnGroup>
        									</f:facet>
        									
										</rich:dataTable>
										<rich:jQuery selector="input[size|=5]" query="mask('99:99')" timing="immediate"/>
									</td>
									<td>
										<rich:dataTable id="tab_resultado" var="reg" value="#{pontoMB.ponto.registros}" rendered="#{!empty pontoMB.ponto.registros}">
											<f:facet name="header">
												<rich:columnGroup>
													<rich:column colspan="3">
														<rich:tooltip layout="block">
											                <span>
											                	<b>Jornada de Trabalho: </b> 
											                	<h:outputText value="#{pontoMB.ponto.jornada}">
											                    	<f:convertNumber pattern="#0.00"/>
											                    </h:outputText>
											                	<h:outputText value="h = #{pontoMB.ponto.jornadaTrabalhoHHMM}"/>
											                </span>
											                <br/>
											                <span>
											                	<b>Tolerância: </b> <h:outputText value="#{pontoMB.ponto.tolerancia}"/> min
											                </span>
											            </rich:tooltip>
									                    <h:outputText value="Horas" />
									                </rich:column>
									                <rich:column breakRowBefore="true">
									                	<h:outputText value="Válidas" />
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="Atraso" />
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="Extra" />
									                </rich:column>
										        </rich:columnGroup>
									        </f:facet>
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8 ;':'background-color: white;'}">
												<h:inputText size="5" style="border-color:transparent; background-color:transparent;" readonly="true" rendered="#{reg.minutosTrabalhados eq 0}"/>	
												<h:inputText value="#{reg.horasValidas}" size="5" style="border-color:transparent; background-color:transparent; text-align:center;" readonly="true" rendered="#{reg.minutosTrabalhados gt 0}"/>	
												<h:inputText value='#{"ERRO"}' size="5" style="border-color:transparent; background-color:transparent; color:red; text-align:center;" readonly="true" rendered="#{!(reg.minutosTrabalhados ge 0)}"/>					
											</rich:column>
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8 ;':'background-color: white;'}">
												<h:inputText size="5" style="border-color:transparent; background-color:transparent;" readonly="true" rendered="#{reg.minutosTrabalhados eq 0}"/>	
												<h:inputText value="#{reg.horasAtraso}" size="5" style="border-color:transparent; background-color:transparent; text-align:center;" readonly="true" rendered="#{reg.minutosTrabalhados gt 0}"/>	
												<h:inputText value='#{"ERRO"}' size="5" style="border-color:transparent; background-color:transparent; color:red; text-align:center;" readonly="true" rendered="#{!(reg.minutosTrabalhados ge 0)}"/>					
											</rich:column>
											<rich:column style="#{reg.fimDeSemana?'background-color: #D8D8D8 ;':'background-color: white;'}">
												<h:inputText size="5" style="border-color:transparent; background-color:transparent;" readonly="true" rendered="#{reg.minutosTrabalhados eq 0}"/>	
												<h:inputText value="#{reg.horasExtra}" size="5" style="border-color:transparent; background-color:transparent; text-align:center;" readonly="true" rendered="#{reg.minutosTrabalhados gt 0}"/>	
												<h:inputText value='#{"ERRO"}' size="5" style="border-color:transparent; background-color:transparent; color:red; text-align:center;" readonly="true" rendered="#{!(reg.minutosTrabalhados ge 0)}"/>					
											</rich:column>
											
											<f:facet name="footer">
									            <rich:columnGroup>
									                <rich:column>
									                	<h:outputText value="#{pontoMB.ponto.totalHorasValidas}"/>
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="#{pontoMB.ponto.totalHorasAtraso}"/>
									                </rich:column>
									                <rich:column>
									                	<h:outputText value="#{pontoMB.ponto.totalHorasExtra}"/>
									                </rich:column>
									            </rich:columnGroup>
        									</f:facet>
        									
										</rich:dataTable>
									</td>
								</tr>
							</table>
						</h:panelGroup>
						<rich:list value="#{pontoMB.feriados}" var="feriado" type="unordered" rendered="#{!empty pontoMB.feriados}">
							<h:outputText value="#{feriado.diaDDMMYYYY} - #{feriado.descricao}" />
						</rich:list>
					</h:panelGrid>
				</a4j:outputPanel>	
			</h:panelGroup>
		</h:form>
	</ui:define>
	
</ui:composition>